import { Button, Cell, Image, Row, Swiper } from '@nutui/nutui-react-taro';
import { Input, Text, View } from '@tarojs/components';
import { useDispatch, useSelector } from 'react-redux';
import React, { useState } from 'react';
import { decrement, increment } from '@/store/countSlice';
import IndexFooterBar from '@/components/IndexFooterBar';
import Skeleton from 'react-loading-skeleton';
import { useDidShow } from '@tarojs/taro';
import { setActivePage } from '@/store/userDataSlice';
import './demo.scss';

const LogupApp = ({ setIsLogup }) => {
    const handleClick = () => {
        setIsLogup(false);
        alert("注册成功");
    };
    return (
        <View style={{ width: "335px", margin: "0 20px", display: "flex", flexDirection: "column", gap: "20px" }}>
            <Text style={{ marginTop: "10px", fontSize: "20px", textAlign: "center" }}>用户注册</Text>
            <View className='Form-Input'>
                <Input placeholder='请输入用户名' />
            </View>
            <View className='Form-Input'>
                <Input placeholder='请输入密码' />
            </View>
            <View className='Form-Input'>
                <Input placeholder='请再次输入密码' />
            </View>
            <Button type='primary' className='Form-Button' onClick={() => handleClick()}>注册</Button>

        </View>
    );
};

const LoginApp = ({ setIsLogin }) => {
    const [isLogup, setIsLogup] = useState(false);
    const handleClickLogin = () => {
        setIsLogin(true);
    };
    const handleClickLogup = () => {
        setIsLogup(true);
    };
    return (
        <>
            {isLogup ?
                <LogupApp setIsLogup={setIsLogup} />
                :
                <View style={{ width: "335px", margin: "0 20px", display: "flex", flexDirection: "column", gap: "20px" }}>
                    <Text style={{ marginTop: "10px", fontSize: "20px", textAlign: "center" }}>用户登陆</Text>
                    <View className='Form-Input'>
                        <Input placeholder='请输入用户名' />
                    </View>
                    <View className='Form-Input'>
                        <Input placeholder='请输入密码' />
                    </View>
                    <Button type='primary' className='Form-Button' onClick={() => handleClickLogin()}>登录</Button>
                    <Text style={{ textAlign: "center" }}>新用户?<Text onClick={() => handleClickLogup()} style={{ color: 'blue' }}>点击注册</Text></Text>
                </View>
            }
        </>
    );
};

const Demo = () => {
    const dispatch = useDispatch();
    const [isLogin, setIsLogin] = useState(false);

    //设置当前页面footbar为active
    const useData = useSelector((state: any) => state.userData);

    useDidShow(() => {
        dispatch(setActivePage("我的"));
        console.log(useData);
    });

    return (
        <View className='MyContainer' >
            {!isLogin ?
                <LoginApp setIsLogin={setIsLogin} />
                :
                <View>登录成功界面</View>
            }

            <IndexFooterBar />
        </View>
    );
};

export default Demo;
